<template>
  <a-modal
    :visible="visible"
    title="查看详情"
    :footer="null"
    @cancel="cancel"
    width="800px"
  >
    <a-descriptions :title="formState.title">
      <a-descriptions-item label="操作人">
        {{ formState.operator }}
      </a-descriptions-item>
      <a-descriptions-item label="动作">
        {{ formState.action }}
      </a-descriptions-item>
      <a-descriptions-item label="浏览器">
        {{ formState.browser }}
      </a-descriptions-item>
      <a-descriptions-item label="方式">
        {{ formState.type }}
      </a-descriptions-item>
      <a-descriptions-item label="系统">
        {{ formState.system }}
      </a-descriptions-item>
      <a-descriptions-item label="IP地址">
        {{ formState.address }}
      </a-descriptions-item>
      <a-descriptions-item label="请求参数">
        {{ formState.params }}
      </a-descriptions-item>
      <a-descriptions-item label="描述">
        {{ formState.describe }}
      </a-descriptions-item>
      <a-descriptions-item label="url地址">
        {{ formState.url }}
      </a-descriptions-item>
      <a-descriptions-item label="更新时间">
        {{ formState.updateTime }}
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, watch } from "vue";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    },
  },
  emit: ["close"],
  setup(props, context) {
    const cancel = (e) => {
      context.emit("close", false);
    };
    const formState = reactive({});

    watch(props, (props) => {
      formState.title = props.record.title;
      formState.operator = props.record.operator;
      formState.action = props.record.action;
      formState.browser = props.record.browser;
      formState.system = props.record.system;
      formState.type = props.record.type;
      formState.describe = props.record.describe;
      formState.params = props.record.params;
      formState.url = props.record.url;
      formState.address = props.record.address;
      formState.updateTime = props.record.updateTime;
    });

    return {
      cancel,
      formState,
    };
  },
});
</script>